<template>
	<div id="goodslist-app">
		<div class="cat-search">
			<form action="javascript:void(0);" onsubmit="searchGoods();">
				<i class="fa fa-search"></i>
				<input type="search" id="keyword" name="kw" placeholder="商品" autocomplete="off">
			</form>
		</div>
		<div class="saerch-area">
		</div>
		<div>
			<ul class="goodslist">
				<li @touchend="touched" @touchstart="touch" @click="$router.push('/GoodsDetail/'+g.id);" v-for="(g,index) in goodslist">
					<div class="img-box">
						<img v-bind:src="FileUrl+g.image" onerror="this.src=config.NoImg" />
					</div>
					<div class="content-box">
						<p class="title"><label v-if="index%2==0">自营</label>{{g.name}}</p>
						<p class='ps-info'><strong>￥{{g.price}}</strong><s>￥{{g.retailPrice}}</s><small>已售:{{g.sellCount}}</small></p>

						<p style="color: #999;">华为品牌</p>
						<p class="store"><label>深圳市坂田基地华为总部<i class="fa fa-angle-right"></i></label><span>98万+评价</span></p>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				FileUrl: config.FileUrl,
				goodslist: []
			}
		},
		components: {},
		beforeCreate: function() {
			var catid = this.$route.query.catid;
			console.log(catid);
			this.$http.post(config.ApiUrl + 'product/list/' + catid, {}, {
				emulateJSON: true
			}).then(function(res) {
				console.log(res.body.data);
				this.goodslist = res.body.data;
			}, function(res) {
				console.log('失败')
			});

		},
		mounted: function() {
			//

		},
		methods: {
			touch: function(e) {
				//e.currentTarget e.target;
				e.currentTarget.classList.add("li-touch");
			},
			touched: function(e) {
				e.currentTarget.classList.remove("li-touch");
			}
		}
	}
</script>

<style scoped>
	.cat-search {
		background-color: #fff;
		padding: .5rem;
		text-align: center;
		position: relative;
	}

	.cat-search i {
		position: absolute;
		left: 6%;
		font-size: 1.4rem;
		color: #999;
		top: 30%;
	}

	.cat-search input {
		background-color: #f9f9f9;
		border-radius: 15px;
		font-size: 14px;
		padding: 8px 0;
		color: #110707;
		-webkit-appearance: none;
		text-indent: 8%;
		height: 34px;
		line-height: 20px;
		width: 95%;
		margin: auto;
		vertical-align: middle;
		outline: none;
	}

	.li-touch {
		background-color: rgba(243, 243, 243, 0.5);
	}

	#goodslist-app .goodslist li {
		display: flex;
		border-top: 1px solid #f1f1f1;
		justify-content: center;
		padding: 1rem;
	}


	#goodslist-app .goodslist li .img-box {
		flex: 1;
		font-size: 0;
	}

	#goodslist-app .goodslist li .content-box {
		flex: 3;
		padding-left: .5rem;
		display: flex;
		flex-direction: column;
	}

	#goodslist-app .goodslist li .content-box .title {
		font-size: 1.5rem;
		color: #444;
		margin: 0;
		flex: 1;
	}

	#goodslist-app .goodslist li .content-box .title label {
		font-size: 1.2rem;
		color: white;
		padding: .1rem .3rem;
		border-radius: .3rem;
		font-weight: 200;
		background-color: #ed3341;
	}


	#goodslist-app .goodslist li .content-box .ps-info strong {
		color: #ed3341;
		font-size: 2rem;
	}

	#goodslist-app .goodslist li .content-box .ps-info s {
		color: #777;
		font-size: 1.4rem;
		margin-left: 1rem;
	}

	#goodslist-app .goodslist li .content-box .ps-info small {
		color: #777;
		font-size: 1.2rem;
		float: right;
		line-height: 2rem;
	}

	#goodslist-app .goodslist li .content-box p {
		font-size: 1.4rem;
		color: #666;
	}
</style>
